/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-04-13 14:56:51
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Button,
  Flex,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Text,
  useDisclosure,
} from '@chakra-ui/react';
import { GiWallet } from 'react-icons/gi';

import ContactBox from './ContactBox';

export default function User() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <Box w="full" py="2">
      <Flex justify="space-between" align="center" p="2" color="base.300">
        <Text fontSize="sm" fontFamily="body">
          剩余积分：0
        </Text>
        <Button
          onClick={() => {
            // navigator('/payment');
            onOpen();
          }}
          color="base.300"
          variant="solid"
          bg="base.850"
          _hover={{ bg: 'base.800' }}
          size="xs"
          leftIcon={<GiWallet />}
        >
          充值
        </Button>
      </Flex>

      <Modal isOpen={isOpen} onClose={onClose} size={{ base: 'sm' }}>
        <ModalOverlay />
        <ModalContent fontFamily="Inter">
          <ModalCloseButton className="modal-close-btn" />
          <ModalHeader fontWeight="bold" pb={3}></ModalHeader>
          <ModalBody>
            <ContactBox />
          </ModalBody>
        </ModalContent>
      </Modal>
    </Box>
  );
}
